<template>
  <div class="Register">
    <div class="head">
      <van-nav-bar title="注册" left-text="返回" left-arrow @click-left="onClickLeft" />
    </div>
    <div class="contain">
      <!-- 输入手机号，调起手机号键盘 -->
      <van-field v-model="tel" type="tel" label="手机号" />
      <van-field v-model="sms" center clearableb label="短信验证码" placeholder="请输入验证码">
        <template #button>
          <van-button size="small" type="primary">获取验证码</van-button>
        </template>
      </van-field>
      <!-- 允许输入正整数，调起纯数字键盘 -->
      <van-field v-model="password" type="password" label="密码" />
      <div style="margin: 16px;">
          <van-button round block type="info" native-type="submit" to='/Register'>
            注册
          </van-button>
        </div>
      <van-checkbox v-model="checked">已阅读并同意<span style="color:red">《用户协议》</span></van-checkbox>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import { Form, field, button, Field, Divider, NavBar, Col, Row, Toast, Checkbox } from 'vant'
Vue.use(Form).use(button).use(field).use(Field).use(Divider).use(NavBar).use(Col).use(Row).use(Toast).use(Checkbox)
export default {
  name: 'Register',

  data () {
    return {
      tel: '',
      password: '',
      sms: '',
      checked: ''
    }
  },
  methods: {
    login () {
      Toast('登录')
    },
    onClickLeft () {
      this.$router.back(-1)
    }
  }
}
</script>

<style scoped>
.van-checkbox{
  margin: 0 0 0 5% ;
}
</style>
